<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>茶叶商品管理系统</title>
    <link href="/app/pages/css/bootstrap.min.css" rel="stylesheet">
    <link href="/app/pages/css/bootstrap-icons.css" rel="stylesheet">
    <style>
        :root {
            --primary-color: #4a8447;
            --secondary-color: #6fb76c;
            --accent-color: #f0f7f0;
        }

        body {
            background-color: #f8f9fa;
            font-family: "Microsoft YaHei", sans-serif;
        }

        .container {
            padding: 30px;
            max-width: 1400px;
        }

        .page-header {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 40px;
            border-radius: 15px;
            margin-bottom: 40px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            background-image: url('https://img.freepik.com/free-photo/green-tea-leaves_1203-2463.jpg');
            background-size: cover;
            background-position: center;
            position: relative;
        }

        .page-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(74, 132, 71, 0.9), rgba(111, 183, 108, 0.9));
            border-radius: 15px;
        }

        .page-header h1 {
            position: relative;
            font-size: 2.5em;
            font-weight: bold;
            margin: 0;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
        }

        .supplier-card {
            background: white;
            border-radius: 10px;
            margin-bottom: 20px;
            transition: all 0.3s ease;
            border: none;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
            overflow: hidden;
            cursor: pointer;
        }

        .supplier-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .card-img-wrapper {
            position: relative;
            overflow: hidden;
            height: 150px;
            /* 减小图片高度 */
        }

        .card-img-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7));
            display: flex;
            align-items: flex-end;
            padding: 15px;
            /* 减小内边距 */
        }

        .supplier-header {
            width: 100%;
        }

        .supplier-header h4 {
            color: white;
            margin: 0;
            font-size: 1.2em;
            /* 减小字体大小 */
            font-weight: 600;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
        }

        .supplier-body {
            padding: 15px;
            /* 减小内边距 */
            background: white;
        }

        .info-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 10px;
            /* 减小间距 */
            gap: 10px;
            /* 减小间距 */
        }

        .info-item:last-child {
            margin-bottom: 0;
        }

        .info-item i {
            color: var(--primary-color);
            font-size: 1.2em;
            margin-top: 3px;
        }

        .info-content {
            flex: 1;
        }

        .info-content label {
            display: block;
            font-size: 0.75em;
            /* 减小字体大小 */
            color: #666;
            margin-bottom: 0;
        }

        .info-content span {
            color: #333;
            font-weight: 500;
            font-size: 0.9em;
            /* 减小字体大小 */
        }

        .card-img-top {
            transition: transform 0.3s ease;
        }

        .supplier-card:hover .card-img-top {
            transform: scale(1.05);
        }

        .product-card {
            background: white;
            border-radius: 15px;
            overflow: hidden;
            transition: all 0.3s ease;
            margin-bottom: 25px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        }

        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        }

        .product-img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            border-top-left-radius: 15px;
            border-top-right-radius: 15px;
        }

        .product-info {
            padding: 20px;
        }

        .product-info h5 {
            color: var(--primary-color);
            font-weight: 600;
            margin-bottom: 15px;
        }

        .badge-level,
        .badge-category {
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 0.85em;
            margin-right: 8px;
            display: inline-block;
        }

        .badge-level {
            background-color: var(--primary-color);
            color: white;
        }

        .badge-category {
            background-color: var(--accent-color);
            color: var(--primary-color);
            border: 1px solid var(--primary-color);
        }

        .product-actions {
            padding: 15px 20px;
            border-top: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            gap: 10px;
        }

        .btn-custom {
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 0.9em;
            transition: all 0.3s ease;
        }

        .btn-custom i {
            margin-right: 5px;
        }

        .btn-add-product {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 25px;
            font-weight: 600;
            margin-bottom: 30px;
            transition: all 0.3s ease;
        }

        .btn-add-product:hover {
            background-color: var(--secondary-color);
            transform: translateY(-2px);
        }

        /* 模态框样式 */
        .modal-custom {
            border-radius: 15px;
            overflow: hidden;
        }

        .modal-custom .modal-header {
            background: var(--primary-color);
            color: white;
            border-bottom: none;
        }

        .modal-custom .modal-body {
            padding: 25px;
        }

        .form-group label {
            color: #555;
            font-weight: 600;
            margin-bottom: 8px;
        }

        .form-control {
            border-radius: 8px;
            border: 1px solid #ddd;
            padding: 10px 15px;
        }

        .form-control:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 0.2rem rgba(74, 132, 71, 0.25);
        }

        /* 添加模态框样式 */
        .detail-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            animation: fadeIn 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .modal-content {
            position: relative;
            width: 90%;
            max-width: 600px;
            background: white;
            border-radius: 15px;
            padding: 20px;
            box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
            animation: slideIn 0.3s ease;
            margin: 0;
        }

        @keyframes slideIn {
            from {
                transform: translateY(-30px);
                opacity: 0;
            }

            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .modal-header {
            padding-bottom: 15px;
            margin-bottom: 20px;
            border-bottom: 1px solid #eee;
            position: relative;
        }

        .modal-close {
            position: absolute;
            top: 0;
            right: 0;
            font-size: 24px;
            cursor: pointer;
            color: #666;
            transition: color 0.3s;
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
        }

        .modal-close:hover {
            color: var(--primary-color);
            background-color: #f0f0f0;
        }

        .modal-title {
            color: var(--primary-color);
            margin: 0;
            font-size: 1.5em;
            padding-right: 30px;
        }

        .detail-item {
            margin-bottom: 15px;
            padding: 10px;
            border-radius: 8px;
            transition: background-color 0.3s;
        }

        .detail-item:hover {
            background-color: #f8f9fa;
        }

        .detail-label {
            font-weight: 600;
            color: #666;
            margin-bottom: 5px;
        }

        .detail-value {
            color: #333;
            font-size: 1.1em;
        }

        .action-buttons {
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid #eee;
            display: flex;
            gap: 10px;
            justify-content: flex-end;
        }

        .action-buttons button {
            padding: 8px 16px;
            border-radius: 20px;
            transition: all 0.3s;
        }

        .action-buttons button:hover {
            transform: translateY(-2px);
        }

        .action-buttons i {
            margin-right: 5px;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }
    </style>
</head>

<body>
<div class="container">

    <div class="page-header">
        <h1>茶叶商品管理 <small>茶叶供应商</small></h1>
    </div>

    <div class="row" id="supplierCards">
    </div>
</div>

<!-- 详情模态框 -->
<div id="detailModal" class="detail-modal" style="display: none;">
    <div class="modal-content">
        <div class="modal-header">
            <h3 class="modal-title">供应商详情</h3>
            <span class="modal-close" onclick="closeModal()">&times;</span>
        </div>
        <div class="modal-body">
            <div class="detail-item">
                <div class="detail-label">供应商名称</div>
                <div class="detail-value" id="modalName"></div>
            </div>
            <div class="detail-item">
                <div class="detail-label">联系人</div>
                <div class="detail-value" id="modalContact"></div>
            </div>
            <div class="detail-item">
                <div class="detail-label">联系电话</div>
                <div class="detail-value" id="modalPhone"></div>
            </div>
            <div class="detail-item">
                <div class="detail-label">电子邮箱</div>
                <div class="detail-value" id="modalEmail"></div>
            </div>
            <div class="detail-item">
                <div class="detail-label">地址</div>
                <div class="detail-value" id="modalAddress"></div>
            </div>
            <div class="action-buttons">
                <button class="btn btn-outline-primary" onclick="viewProducts()">
                    <i class="bi bi-box-seam"></i> 查看商品
                </button>
<%--                <button class="btn btn-outline-success" onclick="editSupplier()">--%>
<%--                    <i class="bi bi-pencil"></i> 编辑--%>
<%--                </button>--%>
<%--                <button class="btn btn-outline-danger" onclick="deleteSupplier()">--%>
<%--                    <i class="bi bi-trash"></i> 删除--%>
<%--                </button>--%>
            </div>
        </div>
    </div>
</div>

<script src="/app/pages/js/jquery.min.js"></script>
<script src="/app/pages/js/bootstrap.bundle.min.js"></script>
<script>
    // 示例数据
    const sampleData = {
        suppliers: [
            <c:forEach items="${list}" var="i">
            {
                id: "${i.id}",
                name: "${i.name}",
                contactperson: "${i.contactperson}",
                phonenumber: "${i.phonenumber}",
                email: "${i.email}",
                address: "${i.address}",
                image: "/app/pages/images/tea-default.jpg"
            },
            </c:forEach>
        ]
    };

    let currentSupplierId = null;

    // 页面加载完成后执行
    $(document).ready(function () {
        // console.log("页面加载完成，开始渲染供应商卡片");
        renderSuppliers(sampleData.suppliers);
    });

    // 渲染供应商卡片
    function renderSuppliers(suppliers) {
        // console.log("开始渲染供应商数据:", suppliers);
        $("#supplierCards").empty();

        suppliers.forEach(supplier => {
            const card =
                '<div class="col-lg-3 col-md-4 col-sm-6 mb-3">' +
                '<div class="supplier-card" onclick="showSupplierDetail(' + supplier.id + ')">' +
                '<div class="card-img-wrapper">' +
                '<img src="' + supplier.image + '" class="card-img-top" alt="' + supplier.name + '" style="height: 150px; object-fit: cover;">' +
                '<div class="card-img-overlay">' +
                '<div class="supplier-header">' +
                '<h4>' + supplier.name + '</h4>' +
                '</div>' +
                '</div>' +
                '</div>' +
                '<div class="supplier-body">' +
                '<div class="info-item">' +
                '<i class="bi bi-person-fill"></i>' +
                '<div class="info-content">' +
                '<label>联系人</label>' +
                '<span>' + supplier.contactperson + '</span>' +
                '</div>' +
                '</div>' +
                '<div class="info-item">' +
                '<i class="bi bi-telephone-fill"></i>' +
                '<div class="info-content">' +
                '<label>电话</label>' +
                '<span>' + supplier.phonenumber + '</span>' +
                '</div>' +
                '</div>' +
                '<div class="info-item">' +
                '<i class="bi bi-envelope-fill"></i>' +
                '<div class="info-content">' +
                '<label>邮箱</label>' +
                '<span>' + supplier.email + '</span>' +
                '</div>' +
                '</div>' +
                '<div class="info-item">' +
                '<i class="bi bi-geo-alt-fill"></i>' +
                '<div class="info-content">' +
                '<label>地址</label>' +
                '<span>' + supplier.address + '</span>' +
                '</div>' +
                '</div>' +
                '</div>' +
                '</div>' +
                '</div>';
            $('#supplierCards').append(card);
        });
    }

    // 显示供应商详情
    function showSupplierDetail(supplierId) {
        currentSupplierId = supplierId;
        const supplier = sampleData.suppliers.find(s => s.id == supplierId);
        if (supplier) {
            $('#modalName').text(supplier.name);
            $('#modalContact').text(supplier.contactperson);
            $('#modalPhone').text(supplier.phonenumber);
            $('#modalEmail').text(supplier.email);
            $('#modalAddress').text(supplier.address);
            $('#detailModal').fadeIn(300);
        }
    }

    // 关闭模态框
    function closeModal() {
        $('#detailModal').fadeOut(300);
        currentSupplierId = null;
    }

    // 查看供应商商品
    function viewProducts() {
        if (currentSupplierId) {
            window.location.href = '/app/prosuppbyid?id=' + currentSupplierId;
        }
    }

    // 编辑供应商信息
    // function editSupplier() {
    //     if (currentSupplierId) {
    //         window.location.href = '/app/supplier/edit?id=' + currentSupplierId;
    //     }
    // }

    // 删除供应商
    // function deleteSupplier() {
    //     if (currentSupplierId && confirm('确定要删除这个供应商吗？此操作不可恢复。')) {
    //         // 这里添加删除逻辑
    //         alert('删除成功！');
    //         closeModal();
    //         // 重新加载数据
    //         // window.location.reload();
    //     }
    // }

    // 点击模态框外部关闭
    $(window).click(function (event) {
        if ($(event.target).hasClass('detail-modal')) {
            closeModal();
        }
    });
</script>
</body>

</html>